<template>
    <div class="list">
        <div class="dc d1" style="gap: 5px;">
            <div>{{ dataList.showTime }}</div>
            <div>{{ isMorningOrAfternoon(dataList.showTime) }}</div>
        </div>

        <div :class="isCustomer?'df d3':'df d2'">
            {{ dataList.number }}{{ $t('text.Common.l19') }}
        </div>

        <div class="df d1" v-if="!isCustomer">

            <CommonImage class="img1" :src="dataList.customerAvatar == null ? '' : dataList.customerAvatar.split(',')[0]" />

            <div class="dc">
                <div>{{ dataList.customerName }}</div>
                <div class="textGray" style="margin-top: 5px;">{{ dataList.customerNotes == null ? '-' :
                    dataList.customerNotes }}
                </div>
            </div>
        </div>

        <div class="df d1" v-if="isCustomer">
            <div class="dc" style="gap: 5px;">
                <div>{{ $t('text.Customer.l13') }}{{ dataList.serialNumber }}/{{ dataList.houseNum }}{{
                    $t('text.Customer.l14')
                }}</div>
                <div>{{ dataList.houseName }}</div>
            </div>
        </div>


        <div class="dc d1">
            <div>{{ dataList.sysUserName == null ? '-' : dataList.sysUserName }}</div>
            <div class="df">
                <div class="textGray">{{ $t('text.House.l46') }}:&ensp;</div>
                <div>{{ dataList.sysUserLowerName == null ? '-' : dataList.sysUserLowerName }}</div>
            </div>
        </div>

        <div class="df d1 textGray" style="word-break: break-all;">
            {{ dataList.feedback == null || dataList.feedback == "" ? '-' : dataList.feedback }}
        </div>

        <div class="dc d2 textLine">
            <div style="position: relative;">
                <CommonImage class="i1" :src="dataList.pics == null ? '' : dataList.pics.split(',')[0]" :list="dataList.pics == null ? [] : dataList.pics.split(',')"/>
                <span class="mask">{{ dataList.pics != null ? dataList.pics.split(",").length
                    <= 1 ? '' : '+' + dataList.pics.split(",").length : '' }}</span>
            </div>
        </div>

        <div class="dc d1" style="gap: 5px;">
            <div class="textBlue" v-if="dataList.customerConfirm == '1'">{{ $t('text.Customer.l12') }}
            </div>

            <div class="textGray" v-else>{{ $t('text.House.l314') }}
            </div>

            <span class="dp"><span class="textGray">{{ $t('text.House.l47') }}：</span>{{ dataList.customerEvaluate }}</span>
        </div>

    </div>
</template>

<script>
import CommonImage from '../input/CommonImage.vue';
export default {
    name: 'TakeLookList',
    components: {
        CommonImage
    },
    props: {
        dataList: {
            default: {}
        },
        isCustomer: Boolean
    },
    data() {
        return {
        }
    },
    mounted() {

    },
    methods: {
        isMorningOrAfternoon(dateTimeStr) {
            const date = new Date(dateTimeStr);
            const hour = date.getHours();
            if (hour >= 0 && hour < 12) {
                return this.$t('text.House.l315');
            } else {
                return this.$t('text.House.l316');
            }
        },
    },
    watch: {

    },
    computed: {

    }

}

</script>


<style scoped>

.list{
    display: flex;
    font-size: 13px;
    align-items: flex-start;
    width: 100%;
    padding-top: 10px;
    gap: 20px;
}

.df {
    display: flex;
    font-size: 13px;
    align-items: flex-start;
}

.dc {
    display: flex;
    flex-direction: column;
}

.d1 {
    flex: 1;
    width: 14%;
}
.d2 {
    flex: 0.7;
    width: 14%;
}
.d3 {
    flex: 0.6;
    width: 14%;
}
.textLine {
    text-decoration: underline
}

.textGray {
    color: gray;
}

.textBlue {
    color: #6698ff;
}

.img1 {
    min-width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid #eee;
    margin-right: 5px;
}

.img2 {
    width: 15px;
    height: 15px;
}

.i1 {
    width: 45px;
    height: 45px;
}


.mask {
    position: absolute;
    left: 15px;
    top: 15px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: auto 0;
}
</style>